<template>
  <div class="trend_page_warp">
    <div v-show="!isShowAddressSelect">
      <contentPage>
        <pageHeader @openSelectAds="openSelectAds" />
        <pageTitleCom :type-list="typeList" @changeType="changeType" />
        <div v-show="defaultTypeIndex===0">
          <div class="trend_page_warp3">
            <div class="trend_w3_box1">
              <div class="trend_w3_box1_left">
                <img
                  crossorigin="anonymous"
                  class="trend_w3_box1_img"
                  src="../../assets/icon/catalog.png"
                  alt=""
                >
                <span class="trend_w3_box1_text">{{ selectAddress }}</span>每周冰山指数
              </div>
              <div class="trend_w3_box1_right"><span class="trend_w3_box1_price">12465</span> 元/平米
              </div>
            </div>
            <div class="trend_w3_options">
              <!--          <div class="trend_w3_opt1">每周房价变化趋势</div>-->
              <div class="trend_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="trend_w3_opt3">
                <div>市场活跃指数</div>
                <div class="trend_w3_opt3_warp">
                  <span class="trend_w3_opt3_l">0.00</span>
                  <div class="trend_w3_opt3_line" />
                  <span class="trend_w3_opt3_r">50.26</span>
                </div>
              </div>
              <div class="trend_w3_opt4">
                <div class="trend_w3_opt4_title">度量名称</div>
                <div class="trend_w3_opt4_type">
                  <span class="trend_w3_opt4_span1">平均价格</span>
                  <span class="trend_w3_opt4_span2">边际价格</span>
                </div>
              </div>
              <div class="trend_w3_opt5" @click="openSelectAddress">
                <div>城市名称</div>
                <div class="trend_w3_opt5_address">{{ selectAddress }}
                  <van-icon name="arrow-down" />
                </div>
              </div>
            </div>
            <div class="trend_w3_Echarts_warp">
              <div id="trendEcharts" class="trend_w3_trendEcharts" />
            </div>
          </div>
          <div class="trend_page_warp4">
            <div class="trend_warp_title">
              <img
                crossorigin="anonymous"
                class="trend_warp_img"
                src="../../assets/icon/increase.png"
                alt=""
              >
              <div class="trend_warp_text">上海行政区冰山指数涨幅排名</div>
            </div>
            <div class="trend_table_warp">
              <table class="trend_table">
                <tr>
                  <th v-for="(itemTh,indexTh) in tableThList" :key="indexTh" class="trend_table_th">{{ itemTh }}</th>
                </tr>
                <tr v-for="(item,index) in arrList1" :key="index" class="trend_table_tr">
                  <td class="trend_table_td1" @click="goXingZhenDetail()">北京</td>
                  <td class="trend_table_td">张山</td>
                  <td class="trend_table_td">李四</td>
                  <td class="trend_table_td">王五</td>
                  <td class="trend_table_td">{{ index + 1 }}</td>
                </tr>
              </table>
            </div>
            <div v-show="!isHavePay">
              <div class="trend_page_isHavePay1">立即解锁</div>
              <div class="trend_page_isHavePay2">即可查看全部行政区涨幅排名</div>
              <div class="trend_page_unlock" @click="handleUnlock">10冰币解锁</div>
            </div>
          </div>
          <div class="trend_page_warp5">
            <div class="trend_warp_title">
              <img
                crossorigin="anonymous"
                class="trend_warp_img"
                src="../../assets/icon/flames.png"
                alt=""
              >
              <div class="trend_warp_text">上海片区市场活跃热度排名TOP30</div>
            </div>
            <ul class="trend_warp5_ul">
              <li v-for="(itemPlace,index) in arrPlaceList2" :key="index" class="trend_warp5_li">
                <span class="trend_warp5_sp1" @click="goPianQuDetail()">{{ itemPlace.name }}</span>
                <span
                  class="trend_warp5_sp2"
                  :style="{width: itemPlace.value + 'px',backgroundColor: itemPlace.color }"
                />
                <span class="trend_warp5_sp3">{{ itemPlace.value }}</span>
              </li>
            </ul>
            <div v-show="!isHavePay">
              <div class="trend_page_isHavePay1">立即解锁</div>
              <div class="trend_page_isHavePay2">即可查看全部片区市场活跃热度排名</div>
              <div class="trend_page_unlock" @click="handleUnlock">10冰币解锁</div>
              <div style="height: 40px" />
            </div>
          </div>
        </div>
        <div v-show="defaultTypeIndex===1">
          <div class="trend_page_warp3">
            <div class="trend_w3_box1">
              <div class="trend_w3_box1_left">
                <img
                  crossorigin="anonymous"
                  class="trend_w3_box1_img"
                  src="../../assets/icon/catalog.png"
                  alt=""
                >
                <span class="trend_w3_box1_text">{{ selectAddress }}</span>成交指数
              </div>
            </div>
            <div class="trend_w3_options">
              <div class="trend_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="trend_w3_opt4">
                <div class="trend_w3_opt4_title">度量名称</div>
                <div class="trend_w3_opt4_type">
                  <div class="trend_w3_opt4_c1">挂牌均价(元)</div>
                  <div class="trend_w3_opt4_c2">成交均价(元)</div>
                </div>
              </div>
              <div class="trend_w3_opt3">
                <div class="trend_w3_opt3_title">成交周期(天)</div>
                <div class="trend_w3_opt3_warp">
                  <span class="trend_w3_opt3_l">0.00</span>
                  <div class="trend_w3_opt3_line" />
                  <span class="trend_w3_opt3_r">50.26</span>
                </div>
              </div>

            </div>
            <div class="trend_w3_Echarts_warp2">
              <div id="trendEcharts2" class="trend_w3_trendEcharts2" />
              <div class="echartsData1">报表日期</div>
              <div class="echartsData2">20/01/26</div>
              <div class="echartsData3">20/02/07</div>
            </div>
          </div>
          <div class="trend_page_warp3">
            <div class="trend_w3_box1">
              <div class="trend_w3_box1_left">
                <img
                  crossorigin="anonymous"
                  class="trend_w3_box1_img"
                  src="../../assets/icon/catalog.png"
                  alt=""
                >
                <span class="trend_w3_box1_text">{{ selectAddress }}</span>成交总价指数
              </div>
            </div>
            <div class="trend_w3_options">
              <div class="trend_w3_opt2" @click="openSelectTime">时间: {{ selectTime }}
                <van-icon name="arrow-down" />
              </div>
              <div class="trend_w3_opt4">
                <div class="trend_w3_opt4_title">度量名称</div>
                <div class="trend_w3_opt4_type">
                  <div class="trend_w3_opt4_c1">挂牌均价(元)</div>
                  <div class="trend_w3_opt4_c2">成交均价(元)</div>
                </div>
              </div>
              <div class="trend_w3_opt3">
                <div class="trend_w3_opt3_title">成交周期(天)</div>
                <div class="trend_w3_opt3_warp">
                  <span class="trend_w3_opt3_l">0.00</span>
                  <div class="trend_w3_opt3_line" />
                  <span class="trend_w3_opt3_r">50.26</span>
                </div>
              </div>

            </div>
            <div class="trend_w3_Echarts_warp2">
              <div id="trendEcharts3" class="trend_w3_trendEcharts2" />
            </div>
          </div>

        </div>
        <!-- 临时按钮入口 -->
        <div class="temp_div">
          <div class="temp_div1">临时按钮</div>
          <div class="temp_div2">
            <span @click="Go1">去小区详情页面</span>
            <span @click="Go2">去学校详情页面</span>
          </div>
        </div>
      </contentPage>
      <footerPage />
    </div>
    <div v-show="isShowAddressSelect">
      <address-select @closeSelectCity="closeSelectAds" />
    </div>

    <!--  地址选择的的弹窗  -->
    <van-popup v-model="isShowAddressPopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsAddress"
        @confirm="onConfirmAddress"
        @cancel="isShowAddressPopup = false"
      />
    </van-popup>
    <!--  时间的弹窗  -->
    <van-popup v-model="isShowTimePopup" position="bottom">
      <van-picker
        show-toolbar
        :columns="columnsTimes"
        @confirm="onConfirmTime"
        @cancel="isShowTimePopup = false"
      />
    </van-popup>
    <!--    冰币解锁组件-->
    <div v-show="isShowUnlock">
      <unlock-com @closeUnlock="closeUnlock" @fastUnlock="fastUnlock" />
    </div>
  </div>
</template>

<script>
import footerPage from '../../components/footer_page'
import contentPage from '../../components/content_page'
import pageTitleCom from '../../components/page_title_com'
import pageHeader from '../../components/page_header'
import addressSelect from '../../components/addressSelect'
import unlockCom from '../../components/unlockCom'
export default {
  name: 'Trend',
  components: { footerPage, contentPage, pageTitleCom, pageHeader, addressSelect, unlockCom },
  data() {
    return {
      searchKeyWord: '',
      defaultTypeIndex: 0,
      typeList: [{ id: 0, name: '冰山指数' }, { id: 1, name: '成交指数' }],
      columnsTimes: ['一年', '全部'],
      columnsAddress: ['上海', '北京'],
      isShowTimePopup: false,
      isShowAddressPopup: false,
      isShowUnlock: false, // 是否显示解锁的弹窗
      selectTime: '一年',
      selectAddress: '上海',
      personnelIndex: [2.6, 5.9, 9.0, 26.4, 28.7, 70.637, 60.6, 70.2, 48.7, 18.8, 6.0, 80],
      personnelIndex1: [12345, 34534, 57316, 42445, 97255, 47727, 69306, 87849, 50108, 12689, 17434, 68906],
      tableThList: ['行政区', '4月第1周', '5月第1周', '月环比', '排名'],
      isHavePay: false,
      arrList1: 3, // 行政数组长度，暂时用数字代替
      arrPlaceList: [
        { id: 0, value: 10, name: '宝山大杨镇' },
        { id: 1, value: 30, name: '宝山中杨镇' },
        { id: 2, value: 100, name: '宝山小杨镇' },
      ], // 片区数组
      arrPlaceList2: [],
      isShowAddressSelect: false, // 头部的地址选择是否显示
      /** echarts的假数据 **/
      timeData: ['2021/01/00', '2021/01/01', '2021/01/02', '2021/01/03', '2021/01/04', '2021/01/05', '2021/01/06', '2021/01/07', '2021/01/08', '2021/01/09', '2021/01/010', '2021/01/011', '2021/01/012', '2021/01/013', '2021/01/014', '2021/01/015', '2021/01/016', '2021/01/017', '2021/01/018', '2021/01/019', '2021/01/020', '2021/01/021', '2021/01/022', '2021/01/023', '2021/01/024', '2021/01/025', '2021/01/026', '2021/01/027', '2021/01/028', '2021/01/029', '2021/01/030', '2021/01/031', '2021/01/032', '2021/01/033', '2021/01/034', '2021/01/035', '2021/01/036', '2021/01/037', '2021/01/038', '2021/01/039', '2021/01/040', '2021/01/041', '2021/01/042', '2021/01/043', '2021/01/044', '2021/01/045', '2021/01/046', '2021/01/047', '2021/01/048', '2021/01/049'],
      lineData1: [90, 87, 65, 20, 77, 13, 89, 16, 6, 39, 98, 81, 54, 67, 91, 1, 90, 57, 7, 31, 19, 6, 25, 30, 56, 19, 90, 21, 16, 76, 26, 56, 31, 35, 36, 14, 46, 21, 38, 74, 54, 65, 75, 50, 48, 36, 67, 37, 77, 15],
      lineData2: [86, 13, 56, 58, 33, 30, 13, 31, 12, 73, 4, 48, 78, 84, 30, 80, 61, 1, 46, 90, 86, 17, 15, 23, 89, 36, 63, 73, 53, 74, 16, 25, 87, 75, 13, 89, 6, 33, 63, 91, 66, 31, 67, 54, 29, 19, 91, 25, 10, 11],
      columnData: [28, 10, 2, 39, 33, 15, 4, 75, 72, 55, 20, 4, 42, 65, 47, 99, 53, 54, 24, 16, 42, 22, 90, 12, 4, 24, 71, 36, 91, 83, 73, 43, 29, 43, 77, 26, 37, 56, 1, 46, 53, 42, 11, 88, 98, 69, 58, 96, 28, 68],

    }
  },
  computed: {
    personnelIndex1Data() {
      const tempArr = this.personnelIndex1 || [0]
      return tempArr.map((item, index) => {
        return item / 1000
      })
    },
  },
  created() {
  },
  mounted() {
    this.drawChart()
    this.drawChart2()
    this.drawChart3()
    this.arrPlaceListChange()
  },
  methods: {
    closeUnlock() {
      this.isShowUnlock = !this.isShowUnlock
    },
    fastUnlock() {
      this.isShowUnlock = !this.isShowUnlock
    },

    Go1() {
      this.$router.push({ name: 'xiaoquDetail' })
    },
    Go2() {
      this.$router.push({ name: 'schoolDetail' })
    },
    Go3() {
      this.$router.push({ name: 'echartTest' })
    },

    openSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    closeSelectAds() {
      this.isShowAddressSelect = !this.isShowAddressSelect
    },
    /** 去到城市的行政区详情 **/
    goXingZhenDetail() {
      this.$router.push({ name: 'xingZhenDetail' })
    },
    goPianQuDetail() {
      this.$router.push({ name: 'pianQuDetail' })
    },

    /**  片区数据修改 **/
    arrPlaceListChange() {
      const tempArr = []
      const tempArr2 = this.arrPlaceList

      for (let i = 0; i < tempArr2.length; i++) {
        if (tempArr2[i].value > 100) tempArr2[i].value = 100
        if (tempArr2[i].value > 0 && tempArr2[i].value <= 10) {
          const bg1 = { color: '#f4baae' }
          const newObj = Object.assign(tempArr2[i], bg1)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 10 && tempArr2[i].value <= 30) {
          const bg2 = { color: '#fc9884' }
          const newObj = Object.assign(tempArr2[i], bg2)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 30 && tempArr2[i].value <= 50) {
          const bg3 = { color: '#f98771' }
          const newObj = Object.assign(tempArr2[i], bg3)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 50 && tempArr2[i].value <= 80) {
          const bg3 = { color: '#c9213b' }
          const newObj = Object.assign(tempArr2[i], bg3)
          tempArr.push(newObj)
        }
        if (tempArr2[i].value > 80) {
          const bg3 = { color: '#a90c38' }
          const newObj = Object.assign(tempArr2[i], bg3)
          tempArr.push(newObj)
        }
      }
      console.log('修改后的数组', tempArr)
      this.arrPlaceList2 = tempArr.reverse()
      return tempArr
    },

    changeType(id) {
      this.defaultTypeIndex = id
      if (this.defaultTypeIndex === 1) {
        this.drawChart2()
      }
    },
    /** echarts 冰山指数图 **/
    drawChart() {
      const trendCharts = document.getElementById('trendEcharts') // 对应地使用ByClassName
      const myChart = this.$echarts.init(trendCharts)
      myChart.setOption({
        data: ['市场活跃指数', '平均价格', '边际价格'],
        inactiveColor: '#777',
        textStyle: {
          color: '#000',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1,
            },
          },
        },
        xAxis: {
          type: 'category',
          data: this.timeData,
          axisLine: { lineStyle: { color: '#8392A5' }},
        },
        yAxis: [

          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 20,
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} k',
            },
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        dataZoom: [{
          textStyle: {
            color: '#8392A5',
          },
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          dataBackground: {
            areaStyle: {
              color: '#8392A5',
            },
            lineStyle: {
              opacity: 0.8,
              color: '#8392A5',
            },
          },
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          show: false,
        }, {
          type: 'inside',
        }],
        animation: false,
        series: [
          {
            type: 'line',
            name: '市场活跃指数',
            data: this.lineData1,
            symbol: 'none',
            itemStyle: {
              color: '#e15759',
            },
          },
          {
            name: '平均价格',
            type: 'line',
            symbol: 'none',
            data: this.lineData2,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: '#4e79a7',
            },
          },
          {
            name: '边际价格',
            type: 'bar',
            data: this.columnData,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },
    /** echarts 成交指数图 成交价 **/
    drawChart2() {
      const trendCharts = document.getElementById('trendEcharts2') // 对应地使用ByClassName
      const myChart = this.$echarts.init(trendCharts)
      myChart.setOption({
        data: ['市场活跃指数', '挂牌均价(元)', '成交均价(元)'],
        inactiveColor: '#777',
        textStyle: {
          color: '#000',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1,
            },
          },
        },
        xAxis: {
          type: 'category',
          data: this.timeData,
          axisLine: { lineStyle: { color: '#8392A5' }},
        },
        yAxis: [

          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 20,
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} k',
            },
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        dataZoom: [{
          textStyle: {
            color: '#8392A5',
          },
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          dataBackground: {
            areaStyle: {
              color: '#8392A5',
            },
            lineStyle: {
              opacity: 0.8,
              color: '#8392A5',
            },
          },
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          show: false,
        }, {
          type: 'inside',
        }],
        animation: false,
        series: [
          {
            type: 'line',
            name: '市场活跃指数',
            data: this.lineData1,
            symbol: 'none',
            itemStyle: {
              color: '#e15759',
            },
          },
          {
            name: '挂牌均价(元)',
            type: 'line',
            symbol: 'none',
            data: this.lineData2,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: '#4e79a7',
            },
          },
          {
            name: '成交均价(元)',
            type: 'bar',
            data: this.columnData,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },

    /** echarts 成交指数图 成交总价 **/
    drawChart3() {
      const trendCharts = document.getElementById('trendEcharts3') // 对应地使用ByClassName
      const myChart = this.$echarts.init(trendCharts)
      myChart.setOption({
        data: ['市场活跃指数', '平均价格', '边际价格'],
        inactiveColor: '#777',
        textStyle: {
          color: '#000',
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            animation: false,
            type: 'cross',
            lineStyle: {
              color: '#376df4',
              width: 2,
              opacity: 1,
            },
          },
        },
        xAxis: {
          type: 'category',
          data: this.timeData,
          axisLine: { lineStyle: { color: '#8392A5' }},
        },
        yAxis: [

          {
            type: 'value',
            name: '市场活跃指数',
            min: 0,
            max: 100,
            interval: 20,
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
          {
            type: 'value',
            name: '房价指数',
            min: 0,
            max: 100,
            interval: 20,
            axisLabel: {
              formatter: '{value} k',
            },
            scale: true,
            axisLine: { lineStyle: { color: '#8392A5' }},
            splitLine: { show: false },
          },
        ],
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true,
        },
        dataZoom: [{
          textStyle: {
            color: '#8392A5',
          },
          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
          handleSize: '80%',
          dataBackground: {
            areaStyle: {
              color: '#8392A5',
            },
            lineStyle: {
              opacity: 0.8,
              color: '#8392A5',
            },
          },
          handleStyle: {
            color: '#fff',
            shadowBlur: 3,
            shadowColor: 'rgba(0, 0, 0, 0.6)',
            shadowOffsetX: 2,
            shadowOffsetY: 2,
          },
          show: false,
        }, {
          type: 'inside',
        }],
        animation: false,
        series: [
          {
            type: 'line',
            name: '市场活跃指数',
            data: this.lineData1,
            symbol: 'none',
            itemStyle: {
              color: '#e15759',
            },
          },
          {
            name: '挂牌均价(元)',
            type: 'line',
            symbol: 'none',
            data: this.lineData2,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              color: '#4e79a7',
            },
          },
          {
            name: '成交均价(元)',
            type: 'bar',
            data: this.columnData,
            smooth: true,
            showSymbol: false,
            itemStyle: {
              normal: {
                barBorderRadius: false,
                color: (params) => {
                  const currentValue = parseInt(params.value)
                  if (currentValue > 0 && currentValue <= 10) {
                    return '#ceeac5'
                  }
                  if (currentValue > 10 && currentValue <= 30) {
                    return '#b1dda8'
                  }
                  if (currentValue > 30 && currentValue <= 50) {
                    return '#9ecc96'
                  }
                  if (currentValue > 50 && currentValue <= 80) {
                    return '#91c19c'
                  }
                  if (currentValue > 80 && currentValue <= 100) {
                    return '#76aa84'
                  }
                  if (currentValue > 100) {
                    return '#73a083'
                  }
                },
              },
            },
          },
        ],
      })
      window.onresize = myChart.resize
    },

    /** 解锁 **/
    handleUnlock() {
      this.isShowUnlock = !this.isShowUnlock
    },

    openSelectTime() {
      this.isShowTimePopup = !this.isShowTimePopup
    },
    onConfirmTime(value) {
      console.log(value)
      this.selectTime = value
      this.isShowTimePopup = !this.isShowTimePopup
    },
    openSelectAddress() {
      this.isShowAddressPopup = !this.isShowAddressPopup
    },
    onConfirmAddress(value) {
      this.selectAddress = value
      this.isShowAddressPopup = !this.isShowAddressPopup
    },
  },
}
</script>

<style scoped lang="scss">
  @import "../../assets/style/base";

  .trend_page_warp {
    .temp_div{
      font-size: pxTorem(32px);
      padding: pxTorem(40px) pxTorem(30px);
      .temp_div1{
        margin-bottom: pxTorem(30px);
      }
      .temp_div2{
        span{
          background-color: #1296db;
          color: #f0f0f0;
          padding: pxTorem(14px) pxTorem(15px);
          margin-right: pxTorem(20px);
        }
      }
    }

    .trend_page_warp2 {
      .trend_page_title {
        padding: pxTorem(12px) pxTorem(0px) pxTorem(12px) pxTorem(40px);
        font-size: pxTorem(36px);
        font-weight: bold;
        position: relative;
      }

      .trend_page_title:after {
        content: '';
        position: absolute;
        left: pxTorem(20px);
        top: pxTorem(23px);
        width: pxTorem(8px);
        height: pxTorem(30px);
        background-color: #1296db;
      }

      .trend_page_index_type {
        display: flex;
        padding: 0 20%;
        justify-content: space-around;

        .trend_page_type_name {
          padding: pxTorem(10px) pxTorem(24px);
          font-size: pxTorem(32px);
          border-radius: pxTorem(60px);
          background-color: #f0f0f0;
        }

        .typeActive {
          background-color: #1296db;
          color: #ffffff;
        }
      }
    }

    .trend_page_warp3 {
      border-top: pxTorem(14px) solid #f0f0f0;
      margin-top: pxTorem(30px);

      .trend_w3_box1 {
        padding: pxTorem(30px);
        display: flex;
        justify-content: space-between;
        border-bottom: pxTorem(4px) solid #f0f0f0;
        font-size: pxTorem(30px);

        .trend_w3_box1_left {
          display: flex;
          align-items: center;
          font-size: pxTorem(34px);
          font-weight: bold;

          .trend_w3_box1_img {
            width: pxTorem(50px);
            height: pxTorem(50px);
            margin-right: pxTorem(10px);
          }

          .trend_w3_box1_text {
            margin-right: pxTorem(12px);
          }
        }

        .trend_w3_box1_right {
          .trend_w3_box1_price {
            font-size: pxTorem(40px);
            font-weight: bold;
          }
        }
      }

      .trend_w3_options {
        display: flex;
        font-size: pxTorem(24px);
        justify-content: space-around;
        align-items: center;
        padding: pxTorem(10px) pxTorem(0px);

        .trend_w3_opt1 {
        }

        .trend_w3_opt2 {
          border: 1px solid #9f9f9f;
          padding: pxTorem(8px) pxTorem(14px);
        }

        .trend_w3_opt3 {
          .trend_w3_opt3_title {
            margin-top: pxTorem(-34px);
          }

          .trend_w3_opt3_warp {
            position: relative;
            font-size: pxTorem(20px);

            .trend_w3_opt3_line {
              height: pxTorem(20px);
              width: pxTorem(140px);
              margin-top: pxTorem(6px);
              background-image: linear-gradient(to right, #ceeac5, #73a083);
            }

            .trend_w3_opt3_l {
              position: absolute;
              top: pxTorem(24px);
            }

            .trend_w3_opt3_r {
              position: absolute;
              right: pxTorem(-20px);
              top: pxTorem(24px);
            }
          }
        }

        .trend_w3_opt4 {
          .trend_w3_opt4_title {
          }

          .trend_w3_opt4_type {
            position: relative;

            .trend_w3_opt4_span1 {
              position: relative;
              display: inline-block;
              margin-right: pxTorem(40px);
              padding-left: pxTorem(20px);
            }

            .trend_w3_opt4_span2 {
              position: relative;
              display: inline-block;
            }

            .trend_w3_opt4_span1:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #4e79a7;
            }

            .trend_w3_opt4_span2:before {
              content: ' ';
              left: pxTorem(-24px);
              position: absolute;
              top: pxTorem(6px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #e15759;
            }

            .trend_w3_opt4_c1 {
              position: relative;
              padding-left: pxTorem(20px);
            }

            .trend_w3_opt4_c2 {
              position: relative;
              padding-left: pxTorem(20px);
            }

            .trend_w3_opt4_c1:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #4e79a7;
            }

            .trend_w3_opt4_c2:before {
              content: ' ';
              position: absolute;
              top: pxTorem(6px);
              left: pxTorem(-4px);
              width: pxTorem(20px);
              height: pxTorem(20px);
              background-color: #e15759;
            }
          }
        }

        .trend_w3_opt5 {
          .trend_w3_opt5_address {
            border: 1px solid #9f9f9f;
            display: flex;
            align-items: center;
            justify-content: space-around;
          }
        }
      }

      .trend_w3_Echarts_warp {
        margin: pxTorem(30px) auto;

        .trend_w3_trendEcharts {
          width: pxTorem(700px);
          margin: auto;
          height: pxTorem(750px);
        }
      }

      .trend_w3_Echarts_warp2 {
        margin: pxTorem(30px) auto;
        position: relative;

        .trend_w3_trendEcharts2 {
          width: pxTorem(650px);
          margin: auto;
          height: pxTorem(750px);
        }

        .echartsData1 {
          position: absolute;
          top: 0;
          left: 6%;
          font-size: pxTorem(28px);
        }

        .echartsData2 {
          position: absolute;
          top: pxTorem(-28px);
          left: 24%;
          font-size: pxTorem(28px);
        }

        .echartsData3 {
          position: absolute;
          top: pxTorem(-28px);
          right: 16%;
          font-size: pxTorem(28px);
        }
      }
    }

    .trend_page_warp4 {

      .trend_table_warp {
        font-weight: normal;

        .trend_table {
          width: 94%;
          margin: auto;

          .trend_table_th {
            font-size: pxTorem(32px);
            border-bottom: 1px solid #9f9f9f;
          }

          .trend_table_tr {
            font-size: pxTorem(26px);
            text-align: center;
            border-bottom: 1px solid #f0f0f0;
            padding: pxTorem(6px) 0;

            .trend_table_td1 {
              color: #333333;
              padding: pxTorem(10px) 0;
            }

            .trend_table_td {
              color: #c9213b;
            }
          }

          .trend_table_tr:nth-child(odd) {
            background-color: #f0f0f0;
          }

          .trend_table_tr:nth-child(even) {
            background-color: #ffffff;
          }
        }
      }
    }

    .trend_page_warp5 {
      .trend_warp5_ul {
        padding: pxTorem(40px);

        .trend_warp5_li {
          margin-bottom: pxTorem(6px);
          display: flex;
          align-items: center;

          .trend_warp5_sp1 {
            width: pxTorem(200px);
            display: inline-block;
            font-size: pxTorem(28px);
            text-align: right;
            margin-right: pxTorem(6px);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .trend_warp5_sp2 {
            display: inline-block;
            height: pxTorem(34px);
          }

          .trend_warp5_sp3 {
            font-size: pxTorem(28px);
            margin-left: pxTorem(10px);
          }
        }
      }
    }

    .trend_unlock_warp {
      position: absolute;
      top: 8%;
      height: 90%;
      overflow: auto;
      .unlock_title{
        margin: pxTorem(60px) auto pxTorem(20px) auto;
        font-size: pxTorem(34px);
        color: #666666;
        text-align: center;
      }
      .unlock_current_need{
        font-size: pxTorem(28px);
        color: #e98f36;
        text-align: center;
        margin: pxTorem(0px) auto;
      }
      .unlock_desc{
        font-size: pxTorem(32px);
        text-align: center;
        color: #666666;
        margin: pxTorem(10px) auto pxTorem(20px) auto;
      }
      .unlock_no_money{
        padding: pxTorem(30px);
        display: flex;
        justify-content: space-between;
        font-size: pxTorem(32px);
        .un_no_r_money{
          color: #e98f36;
        }
      }
      .trend_unlock_warp2 {
        padding: pxTorem(0px) pxTorem(30px);

        .trend_unlock_ul {
          display: flex;
          padding: pxTorem(30px) pxTorem(40px) 0 pxTorem(40px);
          flex-wrap: wrap;
          justify-content: space-between;
          margin-top: pxTorem(20px);
          border-top: 1px solid #999999;

          .trend_unlock_li {
            width: pxTorem(280px);
            text-align: center;
            border: 1px solid #999999;
            padding: pxTorem(21px) 0;
            margin-bottom: pxTorem(40px);
            font-size: pxTorem(28px);
            border-radius: pxTorem(8px);
            position: relative;

            .recharge_money {
              .recharge_money_count {
                font-size: pxTorem(40px);
              }
            }

            .recharge_money_desc {
              color: #999999;
            }

            .rechargeMoneyDesc {
              color: #e98f36;
            }
          }

          .rechargeActive {
            background-color: #ffcc00;
          }

          .right_icon {
            position: absolute;
            top: 0;
            background-color: #e98f36;
            font-size: pxTorem(21px);
            padding: pxTorem(2px) pxTorem(6px);
            border-radius: pxTorem(6px);
            color: #ffffff;
          }

        }

        .input_recharge_money_warp {
          border-radius: pxTorem(4px);
          width: pxTorem(610px);
          margin: auto;
          border: 1px solid #999999;
          .input_recharge_money {
            border: none!important;
            outline: none!important;
            width: 100%;
            padding: pxTorem(4px) pxTorem(20px);
            font-size: pxTorem(32px);
          }
        }
        .recharge_warp{
          font-size: pxTorem(34px);
          padding: pxTorem(20px) pxTorem(36px);
          color: #e98f36;
        }
        .make_sure_recharge{
          width: pxTorem(650px);
          margin:pxTorem(20px) auto;
          height: pxTorem(80px);
          line-height: pxTorem(80px);
          text-align: center;
          font-size: pxTorem(34px);
          color: #ffffff;
          background-color: #e98f36;
          border-radius: pxTorem(8px);
        }
        .recharge_agree{
          width: pxTorem(400px);
          margin: pxTorem(10px) auto;
          font-size: pxTorem(28px);
          color: #666666;
          .recharge_agree_page{
            color: #999999;
          }
        }
      }
      .trend_unlock_warp3{
        padding: pxTorem(0px) pxTorem(30px);
        .trend_unlock_desc{
          font-size: pxTorem(30px);
          color: #666666;
          margin-bottom: pxTorem(30px);
        }
      }
    }

    /* 公共解锁 相关样式 start */
    .trend_page_isHavePay1 {
      text-align: center;
      font-size: pxTorem(28px);
      margin: pxTorem(70px) 0 pxTorem(30px) 0;
    }

    .trend_page_isHavePay2 {
      text-align: center;
      font-size: pxTorem(28px);
      margin: pxTorem(50px) 0 pxTorem(30px) 0;
    }

    .trend_page_unlock {
      text-align: center;
      font-size: pxTorem(28px);
      width: pxTorem(350px);
      padding: pxTorem(12px) 0;
      border-radius: pxTorem(30px);
      background-color: #ff9900;
      color: #ffffff;
      margin: pxTorem(70px) auto pxTorem(30px) auto;
    }

    /* 公共解锁 相关样式 end */

    /* 公共标题 相关样式 start */
    .trend_warp_title {
      display: flex;
      align-items: center;
      padding: pxTorem(30px) pxTorem(20px);

      .trend_warp_img {
        width: pxTorem(40px);
        height: pxTorem(40px);
        margin-right: pxTorem(10px);
      }

      .trend_warp_text {
        font-size: pxTorem(34px);
        color: #333333;
        font-weight: bold;
      }
    }

    /* 公共标题 相关样式 end */
  }
</style>
